<style scoped lang="less">
/* .top{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
  } */

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  width: 100%;
  height: 50px;
  background: #000;

  .logout {
    margin-left: 150px;
  }
}
.main {
  // margin-top: 250px;

  .swiper-image {
    // padding: 20px;
    // margin-left: 50px;
    box-sizing: border-box;
    width: 100%;
    height: 300px;
    border: 1px solid #000;
  }

  .content {
    width: 100%;
    height: 500px;
    // background: #f0f;
  }

  .van-swipe__indicator {
    width: 40px;
    height: 40px;
  }
}

.wenzhang {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  // border: 1px solid #000;
}
.box1 {
  padding: 20px;
  margin-top: 20px;
  height: 50px;
  border: 1px solid #000;
}
</style>

<template>
  <div class="app">
    <div class="top">
      首页
      <div class="logout" @click="logout">退出登录</div>
    </div>

    <div class="wenzhang">
      <div v-for="item in articleItem" :key="item.id">
        <div class="box1">
          <!-- <a :href="articleDetailUrl + '?id=' + item.id"> -->
          <router-link :to="'/detail?id='+ item.id">
            <div>{{ item.title }}</div>
          </router-link>
          <!-- </a> -->
          <div>{{ item.description }}</div>
          <div>{{ item.createtime }}</div>
        </div>
      </div>
    </div>

    <!-- <div class="main">
      <div class="swiper-image">
        <van-swipe :autoplay="1000" :loop="false" :height="300">
          <van-swipe-item>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>

      <div class="content"></div>
    </div>-->

    <div class="footer"></div>
  </div>
</template>


<script>
import config from "../config.js";
import Axios from "axios";

document.title = "小院生活-首页";

export default {
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],
      articleItem: [],
      articleDetailUrl: ""
    };
  },
  created() {
    // console.log(config);
    var that = this;
    var url = this.$userMsg + "demo/article";
    that.articleDetailUrl = this.$userMsg + "demo/articleDetail";
    // that.articleDetailUrl =  articleDetail;

    Axios.get(url, {
      params: {
        page: 2
      }
    }).then(function(result) {
      if (result.data.code) {
        // console.log(result.data.data.data);

        that.articleItem = result.data.data.data;
      } else {
        alert("数据不存在");
      }
    });
  },

  methods: {
    logout() {
      // alert(sessionStorage.getItem("islogin"))
      sessionStorage.setItem("islogin", false);
      this.$router.push({ path: "/login" });
      // window.location.href = "/#/login";
    }
  }
};
</script>